<template>
	<view class="page">
		<view class="top-swiper">
			<swiper class="swiper-list" indicator-dots indicator-color="#7D7D7D" indicator-active-color="#006EFD">
				<swiper-item class="swiper-item" v-for="(item, index) in imageList" :key="index">
					<image :src="item || '/static/images/ic_img.png'" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="serve-detail">
			<view class="detail-title">{{ serviceDetail.serviceName || '' }}</view>
			<view class="detail-introduce">{{ serviceDetail.subtitle || '' }}</view>
			<view class="serve-price">
				<text>￥{{ serviceDetail.price || 0 }}</text>
				元/{{ serviceDetail.specification | statusFilter }}
			</view>
			<view class="tab-info" v-if="serviceDetail.categoryName">{{ serviceDetail.categoryName || '' }}</view>
		</view>
		<!-- 服务详情 -->
		<view class="service-content">
			<view class="title">服务详情</view>
			<view class="top-title">
			</view>
			<mp-html class="content" :content="serviceDetail.serviceDetails"></mp-html>
		</view>
		<!-- 下单说明 -->
		<view class="service-content">
			<view class="title">下单说明</view>
			<view class="top-title"></view>
			<mp-html class="content" :content="infoDetail"></mp-html>
		</view>
		<!-- 底部预约服务 -->
		<view class="bottom-fixed-box">
			<view @click="toHome">
				<image class="icon" src="/static/images/dhome@3x.png"></image>
				<view class="text">首页</view>
			</view>
			<!-- #ifdef MP-WEIXIN -->
			<button open-type="contact">
				<image class="icon" src="/static/images/customersy.png"></image>
				<view class="text">客服</view>
			</button>
			<!-- #endif -->
			<!-- #ifdef APP-PLUS -->
			<view @click="customer">
				<image class="icon" src="/static/images/customersy.png"></image>
				<view class="text">客服</view>
			</view>
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<view @click="HCustomer">
				<image class="icon" src="/static/images/customersy.png"></image>
				<view class="text">客服</view>
			</view>
			<!-- #endif -->
			<view class="serve-btn" @click="goBooking()">预约服务</view>
		</view>
		<code-popup ref="popup"></code-popup>
	</view>
</template>

<script>
	import CodePopup from '@/components/codePopup.vue';
	import {
		getServiceItemsById,
		orderInstructions
	} from '@/apis/request.js';

	export default {
		components: {
			CodePopup
		},
		data() {
			return {
				id: '',
				city: {
					id: 350200,
					title: '厦门市'
				},
				hospitalId: '',
				escortId: '',
				workingCalendarId: '',
				treatmentTime: '',
				imageList: [],
				serviceDetail: {},
				infoDetail: '', //下单说明
				sweixin: null
			};
		},
		filters: {
			statusFilter(status) {
				if (status == 0) {
					return '次';
				} else if (status == 1) {
					return '半天';
				} else if (status == 2) {
					return '白天';
				} else if (status == 3) {
					return '夜间';
				} else if (status == 4) {
					return '全天';
				} else {
					return '月';
				}
			}
		},
		onLoad(options) {
			this.id = options.id;
			this.hospitalId = options.hospitalId || '';
			this.escortId = options.escortId || '';
			this.workingCalendarId = options.workingCalendarId || '';
			this.treatmentTime = options.treatmentTime || '';
			this.city = uni.getStorageSync('city') || {};
			this.channel = options.channel || ''
			this.getServiceDetail();
			this.orderInstructions();
			// #ifdef APP-PLUS
			this.getPlus();
			// #endif
		},
		methods: {
			HCustomer() {
				this.$refs.popup.show = true;
			},
			to(url) {
				uni.navigateTo({
					url
				});
			},
			toHome() {
				uni.switchTab({
					url: '/pages/index/main'
				});
			},
			getServiceDetail() {
				getServiceItemsById({
					cityId: this.city.id,
					id: this.id
				}).then(res => {
					this.serviceDetail = res;
					this.imageList = res.image ? res.image.split(',') : [];
				});
			},
			goBooking() {
				if (uni.getStorageSync('token')) {
					uni.navigateTo({
						url: '/pages/servePages/bookingServe?id=' +
							this.id +
							'&hospitalId=' +
							this.hospitalId +
							'&escortId=' +
							this.escortId +
							'&workingCalendarId=' +
							this.workingCalendarId +
							'&treatmentTime=' +
							this.treatmentTime +
							'&channel=' + 
							this.channel
					});
				} else {
					uni.navigateTo({
						url: '/pages/LoginPages/mylogin/main'
					});
				}
			},
			//下单说明
			orderInstructions() {
				orderInstructions({
					type: 7
				}).then(res => {
					this.infoDetail = res.infoDetail;
				});
			},
			customer() {
				this.sweixin.launchMiniProgram({
					id: this.$shareMiniId //要跳转小程序的原始ID
				});
			},
			getPlus() {
				//获取当前显示的webview
				var pages = getCurrentPages();
				var page = pages[pages.length - 1];
				var currentWebview = page.$getAppWebview();
				//调用H5+APP的扩展API
				var shares = null;
				let that = this;
				var pusher = plus.share.getServices(
					function(s) {
						shares = {};
						for (var i in s) {
							var t = s[i];
							shares[t.id] = t;
						}
						that.sweixin = shares['weixin'];
					},
					function(e) {
						console.log('获取分享服务列表失败：' + e.message);
					}
				);
				//放入当前的webview
				currentWebview.append(pusher);
			}
		}
	};
</script>

<style scoped lang="scss">
	.page {
		background-color: #f2f2f2ff;
		height: 100%;
		min-height: 100vh;
		padding-bottom: 150rpx;

		.top-swiper {
			width: 750rpx;
			height: 360rpx;

			.swiper-list {
				width: 750rpx;
				height: 360rpx;

				.swiper-item {
					image {
						width: 750rpx;
						height: 360rpx;
					}
				}
			}
		}

		.serve-detail {
			padding: 40rpx 30rpx;
			background-color: #fff;

			.detail-title {
				font-size: 34rpx;
				font-weight: bold;
			}

			.detail-introduce {
				font-size: 26rpx;
				color: #666666;
				padding: 20rpx 0;
			}

			.serve-price {
				font-size: 26rpx;
				color: #a3a3a3;

				text {
					color: #ff290b;
					font-size: 40rpx;
				}
			}

			.tab-info {
				margin-top: 10rpx;
				display: inline-block;
				background-color: #fbf5ec;
				color: #faac18;
				font-size: 20rpx;
				padding: 4rpx 10rpx;
				border: 2rpx solid #faac18;
				border-radius: 6rpx;
			}
		}

		.service-content {
			margin-top: 20rpx;
			background-color: #fff;
			padding: 30rpx 38rpx 40rpx 38rpx;
			position: relative;
			
			.title {
				position: absolute;
				font-size: 28rpx;
				left: 50%;
				z-index: 10;
				margin-left: -47rpx;
				top: 35rpx;
				color: #fff;
			}
			.top-title {
				text-align: center;
				margin: 0upx auto;
				margin-bottom: 20rpx;
				width: 160rpx;
				height: 50rpx;
				line-height: 50upx;
				color: #ffffff;
				font-size: 28rpx;
				background: url('../../static/images/titlebg@3x.png') no-repeat;
				background-size: 100% 100%;
				filter: invert(58%) sepia(85%) saturate(357%) hue-rotate(112deg) brightness(97%) contrast(84%);
			}

			.content {
				color: #666666;
				font-size: 26rpx;
				line-height: 40rpx;
				overflow: hidden;
			}
		}

		.bottom-fixed-box {
			display: flex;
			align-items: center;
			justify-content: space-around;
			padding: 24rpx 32rpx;
			background-color: #fff;
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;

			.icon {
				height: 42rpx;
				width: 42rpx;
			}

			.text {
				font-size: 20rpx;
			}

			.serve-btn {
				width: 500rpx;
				height: 70rpx;
				line-height: 70rpx;
				text-align: center;
				border-radius: 35rpx;
				background: #32C59A;
				font-size: 28rpx;
				color: #fff;
			}
		}
	}

	/deep/ .u-back-text {
		min-width: 70rpx;
	}

	button::after {
		border: none;
	}

	button {
		position: relative;
		display: block;
		margin-left: auto;
		margin-right: auto;
		padding-left: 0px;
		padding-right: 0px;
		box-sizing: border-box;
		text-align: center;
		text-decoration: none;
		line-height: 1.35;
		-webkit-tap-highlight-color: transparent;
		overflow: hidden;
		background-color: #fff;
	}
</style>